<template>
  <!-- Revenue profile营收概况------------------营收概况2 -->
  <div class="RevenueProfile">
    <div class="left">
      <div class="top">
        <div class="icon"></div>
        <div class="font">
          <div class="main">{{userNumber}}</div>
          <div class="minor">用户数</div>
        </div>
      </div>
      <div class="bottom">
        <div class="icon2"></div>
        <div class="font">
          <div class="main">{{waterMeterNumber}}</div>
          <div class="minor">水表数</div>
        </div>
      </div>
    </div>
    <!-- <div class="right">
      <div class="top">
        <div class="top_left">
          <div class="font">
            <div class="main">16.31</div>
            <div class="minor">水表数(万块)</div>
          </div>
        </div>
        <div class="top_right">
          <div class="font">
            <div class="main">16.31</div>
            <div class="minor">水表数(万块)</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom_left">
          <div class="font">
            <div class="main">16.31</div>
            <div class="minor">水表数(万块)</div>
          </div>
        </div>
        <div class="bottom_right">
          <div class="font">
            <div class="main">16.31</div>
            <div class="minor">水表数(万块)</div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { WaterGap, WaterCount } from '@/api/baseManage/flMaintain/index'
export default {
  name: 'RevenueProfile',
  data() {
    return {
      //
      userNumber: '',
      waterMeterNumber: '',
    }
  },
  methods: {
    async getUserNumber() {
      // console.log(1111111223441111111111111);
      const res = await WaterGap()
      // console.log(11111111111111111222222222222222222);
      console.log(res.data, '用户数')
      this.userNumber = res.data
    },
    async getWaterMeterNumber() {
      const res = await WaterCount()
      // alter(res,'水表数')
      console.log(res, '水表数')
      this.waterMeterNumber = res.data
    },
  },

  created() {
    this.getUserNumber()
    this.getWaterMeterNumber()
  },
}
</script>
<style lang="scss" scoped>
.RevenueProfile {
  display: flex;
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  .left {
    flex: 1;
    // background: gold;
    display: flex;
    flex-direction: column;
    .top,
    .bottom {
      flex: 1;
      //   background: yellowgreen;
      display: flex;
      justify-content: center;
      align-items: center;
      .icon {
        width: 50px;
        height: 80px;
        background: url('./imges/ysuser.png') no-repeat;
      }
      .icon2 {
        width: 50px;
        height: 80px;
        background: url('./imges/yswater.png') no-repeat;
      }
      .font {
        width: 100px;
        height: 65px;
        display: flex;
        flex-direction: column;
        .main {
          width: 100px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #0a9ac3;
          font-weight: 700;
          font-size: 30px;
          //   background: fuchsia;
        }
        .minor {
          width: 100px;
          height: 30px;
          //   background: steelblue;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .bottom {
      flex: 1;
      //   background: hotpink;
    }
  }
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    border-left: 2px solid #e0e0e0;
    // background: violet;
    .top,
    .bottom {
      flex: 1;
      //   background: yellowgreen;
      display: flex;
      //   justify-content: center;
      align-items: center;
      .top_left,
      .top_right,
      .bottom_left,
      .bottom_right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .font {
          width: 100px;
          height: 65px;
          display: flex;
          flex-direction: column;
          .main {
            width: 100px;
            height: 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #0a9ac3;
            font-weight: 700;
            font-size: 30px;
            //   background: fuchsia;
          }
          .minor {
            width: 100px;
            height: 30px;
            //   background: steelblue;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>
